<template>
    <el-menu
        router
        :default-active="$route.path"
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        :collapse="isCollapse"
    >
        <div style="display: flex; ">
            <el-avatar size="large" icon="el-icon-eleme"></el-avatar>
            <h3 v-show="!isCollapse">课程社区系统</h3>
            
        </div>
        <template v-for="item in menu">
            <el-submenu style="border-radius: 20px" v-if="item.children.length !== 0" :index="item.name" :key="item.name">
                <template slot="title">
                    <i :class="item.icon"></i>
                    <span>{{ item.name }}</span>
                </template>
                <el-menu-item v-for="(child, innerIndex) in item.children" :index="child.path" :key="child.name" >
                    <i :class="child.icon"></i>
                    <span>{{ child.name }}</span>
                </el-menu-item>
            </el-submenu>
            <el-menu-item v-else :index="item.path" :key="item.name">
                <i :class="item.icon"></i>
                <span slot="title">{{ item.name }}</span>
            </el-menu-item>
        </template>
    </el-menu>
</template>

<script>
import menuApi from '@/views/api/system/menu/menu'
import { mapGetters } from 'vuex'

export default  {
    name: "index",
    props: {
        isCollapse: Boolean,
    },
    data() {
        return {
            menu: []
        };
    },
    computed: {
        ...mapGetters(['userInfo', 'asyncRoutes'])
    },
    created() {
        this.init()
    },
    methods: {
        init(){
            this.fetchData()
        },
        fetchData() {
            // menuApi.getTreeMenu().then(response => {
            //     this.menu = response.data
            // })
            this.menu = this.asyncRoutes
        },
    }
}
</script>

<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: calc(100vh - 20px);
}
.el-menu--collapse {
    min-height: calc(100vh - 20px);
    
}
.el-menu {
    height: 100%;
    border: none;
    border-radius: 20px;
    box-shadow: 5px 12px 15px -10px black;
    h3 {
        color: #fff;
        text-align: center;
        line-height: 48px;
        margin: 10px 26px 10px 0;
        
    }
}
.el-avatar--large {
    background-color: #409EFF;
    margin: 14px auto 8px;
}
</style>
